import { Image, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './servicepage.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import Blank from '@/pages/common/blank';
import youImg from '@/assets/image/my/you.png'
import notdataImg from '@/assets/image/none/notdata.png'

type IServicePageProps = T.IProps & T.IServicePageProps;
//@ts-ignore
@connect<Partial<IServicePageProps>, T.IServicePageState>(store2Props, actions)
export default class Info extends Component<Partial<IServicePageProps>, T.IServicePageState> {
  constructor(props: IServicePageProps) {
    super(props);
    this.state = {};
  }

  componentDidMount() { }

  componentDidShow() { }

  componentWillUnmount() { }

  async serviceClick(item) {
    if (item.router) {
      Taro.setStorageSync('url', item.router)
      Taro.navigateTo({
        url: '/pages/package-A/webview/index'
      })
    }
  }

  render() {
    let {
      main: { serviceList },
    } = this.props;
    return (
      <ScrollView className="PageServicePage" scrollY>
        {
          serviceList && serviceList.length > 0 ?
            <View>
              {
                serviceList.map((item, index) => {
                  return (
                    <View className='postViews' key={index} onClick={() => this.serviceClick(item)}>
                      <View
                        style={{
                          flexDirection: 'row',
                          alignItems: 'center',
                        }}>
                        <Image className="image"
                          src={item.image}
                          mode="widthFix"
                        />
                        <View style={{ marginLeft: '15px' }}>
                          <View>
                            <Text className="title">
                              {item.name}
                            </Text>
                          </View>
                        </View>
                      </View>
                      <Image className='iconImg' src={youImg} mode="widthFix" />
                    </View>
                  )
                })
              }
              <View className="status">没有更多了</View>
            </View>
            :
            <Blank
              content="没有搜索结果，换一个关键词试试吧~"
              img={notdataImg}
              imgStyle={{ width: '400rpx', height: '400rpx' }}
              textStyle={{
                fontSize: '32rpx', color: '#999999', textAlign: 'center', marginTop: '40rpx'
              }}
            />
        }

      </ScrollView>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
